

// Main
.action-panel {
	padding-bottom: 16px;
}

// Title
.action-panel__title {
	margin-bottom: 16px;
	font-size: $font-title-small;
	line-height: 24px;
	color: var( --color-neutral-70 );
	clear: none;
}

// Body
.action-panel__body {
	font-size: $font-body-small;
	line-height: 20px;
	color: var( --color-text-subtle );
	overflow: hidden;

	p {
		margin-bottom: 20px;
	}
}

a.action-panel__body-text-link {
	color: var( --color-accent );
	text-decoration: underline;

	&:hover {
		text-decoration: none;
	}
}

// Figure
.action-panel__figure {
	width: 100%;
	margin: 24px 0;
	text-align: center;

	@include breakpoint-deprecated( '>480px' ) {
		float: right;
		max-width: 208px;
		margin: 0 0 20px 24px;

		&.is-inline-body-text {
			margin-top: 40px;
		}

		&.align-left {
			float: left;
			margin-left: 0;
			margin-right: 24px;
		}
	}
}

.action-panel__figure-header {
	margin-bottom: 8px;
	font-size: $font-body-extra-small;
	line-height: 16px;
	text-transform: uppercase;
	text-align: left;
	color: var( --color-text-subtle );
}

.action-panel__figure-list {
	margin: 0 0 20px;
	border: solid 1px var( --color-neutral-10 );
	border-radius: 2px;
	list-style: none;
	text-align: left;
}

.action-panel__figure-list-item {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 16px;
	border-top: solid 1px var( --color-neutral-10 );
	font-size: $font-body-small;
	line-height: 18px;
	color: var( --color-neutral-70 );

	&:first-child {
		border-top: none;
	}
}

// Footer
.action-panel__cta {
	padding-top: 17px;
}

.action-panel__footer {
	position: relative;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -16px;
		right: -16px;
		height: 1px;
		background-color: var( --color-neutral-0 );

		@include breakpoint-deprecated( '>480px' ) {
			left: -24px;
			right: -24px;
		}
	}

}


.action-panel__export-button .gridicon,
.action-panel__support-button .gridicon {
	margin-left: 8px;
}

.action-panel__support-button {
	&.is-external {
		margin-right: 8px;
	}
}
